<template>
	<view>
		<view class="box" @click="tiaozhuan1(binData[0].id)">
			<view class="top">
				<view>{{binData[0].patients_name}}
					<text class="tag" v-if="binData[0].patients_department==1">本人</text>
					<text class="tag" v-else-if="binData[0].patients_department==2">父母</text>
				</view>
				<p class="pp">{{binData[0].patients_id_number}}</p>
			</view>


			<view class="right" @click="toggle('bottom')">
				<view class="myimg">
					<image src="./static/images/切换.png">
					</image>
				</view>
				<text>切换就诊人</text>
			</view>

			<view>
				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff" @change="change">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<view class="box">
							<view class="top">
								<view>{{binData[1].patients_name}}
									<text class="tag" v-if="binData[1].patients_department==1">本人</text>
									<text class="tag" v-else-if="binData[1].patients_department==2">父母</text>
								</view>
								<p class="pp">{{binData[1].patients_id_number}}</p>
							</view>


							<view class="right"><text>默认就诊人</text></view>

						</view>
						<view class="box">
							<view class="top">
								<view>{{binData[2].patients_name}}
									<text class="tag" v-if="binData[2].patients_department==1">本人</text>
									<text class="tag" v-else-if="binData[2].patients_department==2">父母</text>
								</view>
								<p class="pp">{{binData[2].patients_id_number}}</p>
							</view>
							<!-- <view class="right" ><text>默认就诊人</text></view> -->

						</view>
					</view>
				</uni-popup>
			</view>
		</view>

		<view class="nav">
			<button>近一年</button>
			<!-- <button> -->
			<view class="uni-list">
				<view class="uni-list-cell">

					<view class="uni-list-cell-db">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">选择时间</view>
						</picker>
					</view>
				</view>
			</view>
			<!-- </button> -->

		</view>
		<view class="centen" v-for="v in binData">
			<view>
				<p>{{v.Cost_type}}</p>
				<p class="zuo">{{v.Clinic_department}}&nbsp; {{v.doctor}}</p>
				<p class="zuo">{{v.Outpatient_service_time}}</p>
			</view>
			<view>
				<text class="you">￥60.00</text>
			</view>

		</view>

	</view>
</template>

<script>
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '12:01',
				binData: {}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle(type) {

				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			getall() {
				uni.request({
					url: "http://localhost:3000/selecttable",
					data: {
						id: 1
					},
					success: (res) => {
						this.binData = res.data.data
						console.log(this.binData)
					}
				})

			},
			tiaozhuan1(p) {
				let obj1 =this.binData
				uni.setStorageSync('binData2',obj1);
				uni.navigateTo({
					url: `/pages/home/personalCenter/Paymentdetails/Paymentdetails?id=${p}`
				})
			},
		},
		onLoad() {
			this.getall()
		}
	}
</script>

<style lang="scss">
	.box {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		background-color: #f5f9ff;
		width: 700rpx;
		height: 150rpx;
		margin-left: 20rpx;
		margin-bottom: 25rpx;
		margin-top: 25rpx;

		.right {
			display: flex;

			// flex-direction: column;
			text {
				font-size: 12px;
				color: #939598;
				padding-right: 25rpx;
				box-sizing: border-box;
			}

			.myimg {
				image {
					width: 30rpx;
					height: 30rpx;
					z-index: 2;
				}

				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;

			}
		}

		.tag {
			display: inline-block;
			width: 80rpx;
			height: 35rpx;
			background: #e2edfe;
			color: #4f9aff;
			text-align: center;
			border-radius: 20rpx;
			font-size: 20rpx;
		}
	}



	.top {
		padding-left: 25rpx;
		box-sizing: border-box;

		.pp {
			margin-top: 20rpx;
			font-size: 12px;
			color: #939598;
		}
	}

	.tit {
		margin-left: 25rpx;
	}

	.nav {
		width: 700rpx;
		height: 100rpx;

		button {

			border-radius: 25rpx;
			margin-left: 20rpx;
			float: left;
		}
	}

	.nav button:nth-child(1) {
		background-color: #006eff;
		color: white;
		font-size: 24rpx;
		text-align: center;

	}

	.uni-list {
		background-color: #e4f0ff;
		color: #4294ff;
		font-size: 24rpx;
		float: left;
		text-align: center;
		border-radius: 25rpx;
		margin-left: 20rpx;
		padding: 15rpx 36rpx;




	}

	.centen {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		border: 1rpx solid #ebecec;
		width: 700rpx;
		height: 150rpx;
		margin-left: 10rpx;
		margin-bottom: 25rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		line-height: 50rpx;

		.zuo {
			color: #b8b8b8;
			font-size: 22rpx;

		}

		.you {
			color: red;
			padding-top: 50rpx;
			padding-bottom: 50rpx;

		}
	}

	.popup-content {
		// @include flex;
		// height: 200rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;
		padding-right: 15px;

		background-color: #fff;
	}

	.text {
		font-size: 12px;
		color: #333;
	}
</style>
